<template>
  <div class="knowledge-base-container">
    <!-- 页面标题 -->
    <a-page-header
      title="AI 知识库"
      sub-title="探索人工智能的前沿知识"
      @back="() => {}"
    />

    <!-- 搜索与筛选区域 -->
    <a-card class="filter-card" :bordered="false">
      <a-row :gutter="[16, 16]">
        <a-col :span="18">
          <a-input-search
            v-model:value="searchQuery"
            placeholder="搜索知识条目..."
            enter-button
            @search="handleSearch"
          />
        </a-col>
        <a-col :span="6">
          <a-select
            v-model:value="selectedCategory"
            placeholder="选择分类"
            style="width: 100%"
            @change="handleCategoryChange"
          >
            <a-select-option value="">全部分类</a-select-option>
            <a-select-option
              v-for="category in categories"
              :key="category.key"
              :value="category.key"
            >
              {{ category.label }}
            </a-select-option>
          </a-select>
        </a-col>
      </a-row>
    </a-card>

    <!-- 知识条目列表 -->
    <a-list
      class="knowledge-list"
      item-layout="vertical"
      size="large"
      :data-source="filteredKnowledge"
    >
      <template #renderItem="{ item }">
        <a-list-item key="item.id">
          <!-- 条目标题与元信息 -->
          <template #actions>
            <span>
              <a-tag color="blue">{{ item.categoryLabel }}</a-tag>
            </span>
            <span>{{ item.updatedAt }}</span>
          </template>

          <a-list-item-meta>
            <template #title>
              <div>{{ item.title }}</div>
            </template>
            <template #description>
              <div class="meta-description">
                <span>来源：{{ item.source }}</span>
                <span>标签：
                  <a-tag
                    v-for="tag in item.tags"
                    :key="tag"
                    color="geekblue"
                    style="margin-right: 4px;"
                  >
                    {{ tag }}
                  </a-tag>
                </span>
              </div>
            </template>
          </a-list-item-meta>

          <!-- 条目内容摘要 -->
          <div class="content-excerpt">
            {{ item.excerpt }}
          </div>

          <!-- 扩展操作 (未来可扩展) -->
          <template #extra>
            <a-button type="link" size="small" disabled>查看详情</a-button>
          </template>
        </a-list-item>
      </template>
    </a-list>

    <!-- 无数据提示 -->
    <a-empty
      v-if="filteredKnowledge.length === 0"
      description="暂无匹配的知识条目"
      class="empty-state"
    />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 模拟知识库数据 (后续可替换为 API 调用)
const knowledgeData = ref([
  {
    id: 1,
    title: "大型语言模型 (LLM) 的工作原理",
    excerpt: "探讨 Transformer 架构、注意力机制以及预训练与微调过程。",
    category: "llm",
    categoryLabel: "大语言模型",
    source: "技术博客",
    tags: ["Transformer", "注意力", "预训练"],
    updatedAt: "2025-08-15",
    link: "https://example.com/llm-primer"
  },
  {
    id: 2,
    title: "计算机视觉中的目标检测算法演进",
    excerpt: "从 R-CNN 到 YOLOv8，梳理目标检测技术的发展脉络。",
    category: "cv",
    categoryLabel: "计算机视觉",
    source: "学术论文",
    tags: ["YOLO", "R-CNN", "目标检测"],
    updatedAt: "2025-08-10",
    link: "https://example.com/cv-detection"
  },
  {
    id: 3,
    title: "强化学习在游戏 AI 中的应用",
    excerpt: "介绍 Q-Learning, DQN 及其在复杂游戏环境中的成功案例。",
    category: "rl",
    categoryLabel: "强化学习",
    source: "会议报告",
    tags: ["Q-Learning", "DQN", "游戏AI"],
    updatedAt: "2025-08-05",
    link: "https://example.com/rl-games"
  },
  {
    id: 4,
    title: "AI 伦理与偏见问题探讨",
    excerpt: "分析数据偏见、算法公平性及负责任 AI 的实践框架。",
    category: "ethics",
    categoryLabel: "AI 伦理",
    source: "行业白皮书",
    tags: ["公平性", "偏见", "伦理"],
    updatedAt: "2025-07-28",
    link: "https://example.com/ai-ethics"
  }
])

// 分类选项
const categories = [
  { key: 'llm', label: '大语言模型' },
  { key: 'cv', label: '计算机视觉' },
  { key: 'rl', label: '强化学习' },
  { key: 'ethics', label: 'AI 伦理' }
]

// 搜索与筛选状态
const searchQuery = ref('')
const selectedCategory = ref('')

// 计算属性：根据搜索和筛选条件过滤知识条目
const filteredKnowledge = computed(() => {
  return knowledgeData.value.filter(item => {
    const matchesSearch = item.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
                          item.excerpt.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
                          item.tags.some(tag => tag.toLowerCase().includes(searchQuery.value.toLowerCase()))
    const matchesCategory = !selectedCategory.value || item.category === selectedCategory.value
    return matchesSearch && matchesCategory
  })
})

// 搜索处理函数
const handleSearch = (value) => {
  console.log('搜索:', value)
  // 后续可添加防抖、API 调用等
}

// 分类筛选处理函数
const handleCategoryChange = (value) => {
  console.log('筛选分类:', value)
  // 后续可添加状态持久化等
}
</script>

<style scoped>
.knowledge-base-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

.filter-card {
  margin-bottom: 24px;
  background: #f5f5f5;
}

.knowledge-list {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.meta-description {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
}

.content-excerpt {
  margin-top: 8px;
  color: #555;
  line-height: 1.6;
}

.empty-state {
  margin-top: 48px;
  text-align: center;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .knowledge-base-container {
    padding: 16px;
  }

  .filter-card :deep(.ant-row) {
    flex-direction: column;
  }

  .filter-card :deep(.ant-col) {
    width: 100% !important;
  }
}
</style>